<template>
	<view class="content-header flex-column">
		<view class="header flex-row flex-content-between">
			<view v-for="(item,index) in orderList">
				<view :class="selected==index?`select-header`:`not-header`" @tap="changeTab(index)">{{item.name}}</view>
			</view>
		</view>
		<scroll-view :scroll-y="true" class="scroll-order">
			<view class="flex-column" v-for="ite in orderList[selected].data">
				<view class="scroll-order-item" @tap="orderInfo">
					<view class="scroll-order-item-goods flex-row flex-content-between" v-for="i in goodsList">
						<view class="flex-row">
							<image class="scroll-order-item-goods-img" src="../../static/index/sp.png" mode="widthFix"></image>
							<view class="flex-column scroll-order-item-goods-txt">
								<view class="scroll-order-item-goods-txt1">鲜活大虾</view>
								<view class="scroll-order-item-goods-txt2">500g</view>
							</view>
						</view>
						<view class="flex-column">
							<view class="scroll-order-item-goods-txt3">￥60</view>
							<view class="scroll-order-item-goods-txt4 flex-row flex-content-end">x1</view>
						</view>
					</view>
					<view class="scroll-cento flex-row flex-item-center">
						<image class="scroll-cento-img" src="../../static/user/icon-dfh.png" mode="scaleToFill"></image>
						<view>待发货</view>
						<view>11月22号前发货</view>
					</view>
					<view class="flex-row flex-content-end scroll-parice">
						<view>含运费</view>
						<view>实付款 ￥66</view>
					</view>
					<view class="scroll-bth flex-row flex-content-end">
						<view class="scroll-bth-item">申请退款</view>
						<view class="scroll-bth-items">确认收货</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				selected:0,
				goodsList:[
					""
				],
				orderList:[
					{
						name:"全部",
						data:[
							"",
							""
						]
					},
					{
						name:"待发货",
						data:[
							"",
							"",
							"",
							"",
							"",
						]
					},
					{
						name:"待收货",
						data:[
							"",
							"",
							"",
							"",
							"",
						]
					},
					{
						name:"退款/售后",
						data:[
							"",
							"",
							"",
							"",
							"",
						]
					},
					{
						name:"完成",
						data:[
							"",
							"",
							"",
							"",
							"",
						]
					}
				]
			}
		},
		methods:{
			changeTab(index){
				this.selected = index
			},
			orderInfo(){
				uni.navigateTo({
					url:'/pages/order/order_info'
				})
			}
		}
	}
</script>

<style lang="scss">
	.scroll-bth{
		.scroll-bth-item{
			width: 136rpx;
			height: 52rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			opacity: 1;
			border: 2rpx solid #CCCCCC;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			text-align: center;
			line-height: 52rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
			margin-top: 34rpx;
		}
		.scroll-bth-items{
			width: 136rpx;
			height: 52rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			opacity: 1;
			border: 1px solid $default-button-color;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: $default-button-color;
			text-align: center;
			line-height: 52rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
			margin-top: 34rpx;
		}
	}
	.scroll-parice{
		margin-top: 20rpx;
		line-height: 40rpx;
		margin-right: 20rpx;
		>view:nth-child(1){
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
		>view:nth-child(2){
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 20rpx;
		}
	}
	.scroll-cento-img{
		width: 38rpx;
		height: 30rpx;
		margin-left: 26rpx;
	}
	.scroll-cento{
		width: 650rpx;
		background-color: #F4F4F4;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		height: 60rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		>view:nth-child(2){
			font-size: 24rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 14rpx;
		}
		>view:nth-child(3){
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 30rpx;
		}
	}
	.scroll-order-item-goods-txt{
		margin-left: 20rpx;
	}
	.scroll-order-item-goods-txt1{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.scroll-order-item-goods-txt2{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 16rpx;
	}
	.scroll-order-item-goods-txt3{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.scroll-order-item-goods-txt4{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 18rpx;
	}
	.scroll-order-item-goods-img{
		width: 144rpx;
	}
	.scroll-order-item-goods{
		margin-top: 16rpx;
		margin-left: 18rpx;
		margin-right: 20rpx;
	}
	.scroll-order-item{
		width: 690rpx;
		// height: 406rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.scroll-order{
		width: 690rpx;
		height: calc(100vh - 200rpx);
		// background-color: #FF7336;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}
	.select-header{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: $default-button-color;
	}
	.not-header{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.header{
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-top: 30rpx;
	}
</style>